import React, { useEffect, useState } from 'react'
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps, Row, Col, message, Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { auditResults } from '@/utils/constant'
import moment from 'moment'
import { connect } from 'umi'
import {getUploadUrl} from "@/utils/upload";

const FormItem = Form.Item;
const {TextArea} = Input;
const {Option} = Select;

const CreateForm = (props) => {
  const {visible, current, onSubmit, onCancel, currentUser = {}} = props;
  const [form] = Form.useForm();
  const [fileName, setFileName] = useState(null);
  const [fileUploadUrls, setFileUploadUrls] = useState([]);
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [fileList, setFileList] = useState([]);

  const fileProps = {
    name: 'file',
    multiple: false,
    action: getUploadUrl(),
    data: {name: fileName},
    fileList: fileList,
    beforeUpload(file) {
      if (file.size/1024 > 10000) {
        message.error(`上传文件大小不能超过10M！`);
        return false;
      }
      setFileName(file.name)
    },
    defaultFileList: uploadedFiles,
    onChange(info) {
      const {status} = info.file;
      if (status === 'done') {
        if (info.file.response.error) {
          message.success(`${info.file.response.error} 。`);
        } else {
          let urls = fileUploadUrls;
          urls.push(info.file.response);
          setFileUploadUrls(urls);
          message.success(`${info.file.name} 文件上传成功。`);
        }
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败。`);
      }
      let files = info.fileList.filter(item => item.status);
      setFileList(files);
    },
    onRemove(info) {
      let urls = fileUploadUrls;
      let index = urls.indexOf(info.url);
      if (index > -1)
        urls.splice(index, 1);
      setFileUploadUrls(urls);
    }
  };

  useEffect(() => {
    if (current){
      current.auditTime = current.auditTime?moment(current.auditTime):null;
      if (current.annexUrlList.length>0){
        setFileUploadUrls(current.annexUrlList);
        setUploadedFiles(current.annexUrlList.map((item,index) =>{
          return {
            uid: index,
            name: item.split('----')[1],
            status: 'done',
            url: item,
          }
        }))
      }
      form.setFieldsValue(current);
    }
  },[current]);

  const onFormCancel = () => {
    setFileUploadUrls([]);
    form.resetFields();
    onCancel();
  };

  const handleOk = async () => {
    const fieldsValue = await form.validateFields();
    let data = {
      ...current,
      ...fieldsValue,
      status:1,
      urlIdsList: fileUploadUrls,
      applyCode: currentUser.usercode,
      applyName: currentUser.name,
      applyOid: currentUser.id
    };
    form.resetFields();
    onSubmit({ ...data, urlIdsList: fileUploadUrls });
    setFileUploadUrls([]);
  };

  return (
    <Modal
      title="审计待办信息填写"
      centered
      visible={visible}
      onOk={() => handleOk()}
      onCancel={() => onFormCancel()}
      width={700}
    >
      <Form
        form={form}
      >
        <Row gutter={24}>
          <Col span={12}>
            <FormItem name="auditStatus" label="审计结果录入状态" rules={[{required: true,message: '请选择审计结果录入状态！'}]}>
              <Select placeholder="请选择" >
                {auditResults.map((item) => {
                  return (
                    <Option value={item.value} key={item.value}>{item.label}</Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="auditTime" label="审计结束日期" rules={[{required: true,message: '请选择审计结束日期！'}]}>
              <DatePicker placeholder="请选择审计结束日期" className='widthStyle' />
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem name="remark" label="审计说明" rules={[{required: true,message: '请输入审计说明！'}]}>
              <TextArea />
            </FormItem>
          </Col>
          <Col span={24}>
            <Upload {...fileProps}>
              <Button>
                <UploadOutlined/> 点击上传附件
              </Button>
            </Upload>
          </Col>
        </Row>
      </Form>

    </Modal>
  )
}

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(CreateForm)
